<template>
	<div class="three-root">
		<threed-view
			class="threed-view"
			ref="threedView"
			@onElementClick="onElementClick"
		/>
		<div class="footer-lay">
			<button @click="onCloseClick">
				{{ $t("message.public.close") }}
			</button>
			<!-- <button @click="onRefreshClick"><i class="iconfont">&#xe81f;</i></button> -->
		</div>
	</div>
</template>

<script>
import { getTotDimensInteractive } from "@/api/api";
import ThreeDBaseCom from "@/components/ThreeDScene/threeDBaseCom.vue";
import threeData from "@/utils/testThreeData.js";
export default {
	components: {
		"threed-view": ThreeDBaseCom,
	},

	data() {
		//数据
		return {
			testElementId: [
				"100_136016",
				"100_135909",
				"100_135965",
				"100_135855",
				"100_136141",
				"100_136063",
			],
		};
	},

	props: ['readTabelRow', 'defaultBgColor'],

	methods: {
		getThreeNumberList(inDmgCode) {
			if (inDmgCode == null) return;
			getTotDimensInteractive({
				dmgCode: inDmgCode,
			}).then(res => {
				if (res.data.code == 0) {
					let tempPartIds = [];
					res.data.data.forEach((element) => {
						tempPartIds.push(element.partsCode);
					});
					// this.$refs.threedView.setElemnetsColorsAndResetOther(
					// 	tempPartIds
					// );
					this.$refs.threedView.setElementVisibleAndResetOther(
						tempPartIds
					);
				}
			});
		},

		onSelectDataFromExternal(inData) {
			this.$refs.threedView.resetAllSelectParts();
			this.getThreeNumberList(inData.dmgCode);
		},

		onElementClick(inId) {
			// this.$refs.threedView.resetAllSelectParts();
			// this.$refs.threedView.setElemnetColor(inId);

			// let tempId = this.randomNum(0, 3);
			// this.$emit("on3dElementClick", tempId);
		},

		//生成从minNum到maxNum的随机数
		randomNum(minNum, maxNum) {
			switch (arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1, 10);
					break;
				case 2:
					return parseInt(
						Math.random() * (maxNum - minNum + 1) + minNum,
						10
					);
					break;
				default:
					return 0;
					break;
			}
		},

		/**
		 * 关闭按钮
		 */
		onCloseClick() {
			this.$emit("onCloseClick");
		},
	},

	mounted() {
		this.$refs.threedView.initEngineAndScene(
			threeData.modelJsonUrl,
			threeData.modelId,
			threeData.initView,
			this.defaultBgColor
		);

		this.onSelectDataFromExternal(this.readTabelRow)
	},
};
</script>

<style lang="scss" scoped>
.three-root {
	border: 1px solid #c3c3c3;
	display: flex;
	flex-direction: column;
}

.threed-view {
	width: 100%;
	height: calc(100% - 0px);
}

.footer-lay {
	position: absolute;
	z-index: 10;
	bottom: 0;
	width: 100%;
	height: 47px;
	padding: 0 15px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	background: #ffffff;
	button {
		width: 82px;
		height: 32px;
		background: #ffffff;
		border: 1px solid #d9d9d9;
		margin-right: 12px;
		border-radius: 4px;
	}

	button:nth-child(1) {
		// position: absolute;
		background: #eb7421;
		color: #fff;
		right: 0px;
	}

	button:nth-child(2) {
		width: 52px;
		background-color: #f8f8f8;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.65);
	}

	.iconfont {
		color: rgba(0, 0, 0, 0.65);
	}
}
</style>